import { useRef, useEffect, useState } from 'react'
import './index.scss'
import useECharts from '@/utils/useECharts'
import { getMovieTypeApi } from '@/api'

function MovieType() {
  const typeRef = useRef(null)
  const [data, setData] = useState([])
  useEffect(() => {
    const getMovieType = async () => {
      const res = await getMovieTypeApi()
      const data = Object.entries(res.data).map(([key, value]) => {
        return {
          value,
          name: key
        }
      })
      setData(data)
    }
    getMovieType()
  }, [])

  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [
      {
        name: '类型占比',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  useECharts(typeRef, option)

  return (
    <>
      <div className="movie-type">
        <h1>电影类型占比</h1>
        <div id="type" ref={typeRef}></div>
      </div>
    </>
  )
}

export default MovieType
